<template>
  <div id="messagePage">
    <div class="left">
      <ul>
        <li
          @click="changeType(item)"
          :class="currentType == item.name ? 'active' : ''"
          v-for="item in typeList"
          :key="item.appCode"
        >
          {{ item.name + "(" + item.unread + ")" }}
        </li>
      </ul>
    </div>
    <div class="right">
      <Event
        v-for="item in dataList"
        :key="item.id"
        :eventData="item"
        @child-event="parentMethod"
      ></Event>
    </div>
    <div class="paginationBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParmas.pageNum"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Event from "@/views/event";
export default {
  components: { Event },
  data() {
    return {
      typeList: {},
      currentType: "全部",
      dataList: [],
      searchParmas: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      appCode: "",
    };
  },
  created() {
    this.getMessageNum();
  },
  mounted() {
    document.addEventListener(
      "wheel",
      function (event) {
        if (event.ctrlKey) {
          event.preventDefault();
        }
      },
      { passive: false }
    );

    document.addEventListener("keydown", function (event) {
      if (
        event.ctrlKey &&
        (event.key === "+" || event.key === "-" || event.key === "0")
      ) {
        event.preventDefault();
      }
    });
    document.querySelector("#messagePage").style.height =
      window.innerHeight + "px";
  },
  methods: {
    // 获取消息数量
    getMessageNum() {
      this.axios({
        url: "/seeyon/rest/select/getCategory",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: {
          loginName: localStorage.getItem("loginName"),
        },
      }).then((res) => {
        console.log("获取消息数量", res);
        if (res.data.code == 0) {
          this.typeList = [
            {
              name: "全部",
              appCode: "",
              unread: res.data.data.unreadCount,
            },
            ...res.data.data.category,
          ];
          this.changeType(this.typeList[0]);
        }
      });
    },
    changeType(item) {
      this.currentType = item.name;
      this.appCode = item.appCode;
      this.axios({
        url: "/seeyon/rest/select/message",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: {
          loginName: localStorage.getItem("loginName"),
          pageNum: this.searchParmas.pageNum,
          pageSize: this.searchParmas.pageSize,
          appCode: this.appCode,
        },
      }).then((res) => {
        console.log("获取消息数据列表", res);
        if (res.data.code == 0) {
          var list = res.data.data.list;
          this.total = res.data.data.total;
          var arr = [];
          for (let key in list) {
            for (let i in list[key]) {
              list[key][i].forEach((item) => {
                var newobj = item;
                newobj.createDate = key;
                newobj.time = i;
                arr.push(newobj);
              });
            }
          }
          this.dataList = arr;
          console.log("this.dataList", this.dataList);
        }
      });
    },
    parentMethod() {
      console.log("父组件方法被触发");
      // 输出: 父组件方法被触发 这是子组件传递的数据
      this.axios({
        url: "/seeyon/rest/select/getCategory",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: {
          loginName: localStorage.getItem("loginName"),
        },
      }).then((res) => {
        console.log("获取消息数量", res);
        if (res.data.code == 0) {
          this.typeList = [
            {
              name: "全部",
              appCode: "",
              unread: res.data.data.unreadCount,
            },
            ...res.data.data.category,
          ];
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchParmas.pageSize = val;
      this.axios({
        url: "/seeyon/rest/select/message",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: {
          loginName: localStorage.getItem("loginName"),
          pageNum: this.searchParmas.pageNum,
          pageSize: this.searchParmas.pageSize,
          appCode: this.appCode,
        },
      }).then((res) => {
        console.log("获取消息数据列表", res);
        if (res.data.code == 0) {
          var list = res.data.data.list;
          this.total = res.data.data.total;
          var arr = [];
          for (let key in list) {
            for (let i in list[key]) {
              list[key][i].forEach((item) => {
                var newobj = item;
                newobj.createDate = key;
                newobj.time = i;
                arr.push(newobj);
              });
            }
          }
          this.dataList = arr;
          console.log("this.dataList", this.dataList);
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchParmas.pageNum = val;
      this.axios({
        url: "/seeyon/rest/select/message",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          token: localStorage.getItem("restToken"),
        },
        data: {
          loginName: localStorage.getItem("loginName"),
          pageNum: this.searchParmas.pageNum,
          pageSize: this.searchParmas.pageSize,
          appCode: this.appCode,
        },
      }).then((res) => {
        console.log("获取消息数据列表", res);
        if (res.data.code == 0) {
          var list = res.data.data.list;
          this.total = res.data.data.total;
          var arr = [];
          for (let key in list) {
            for (let i in list[key]) {
              list[key][i].forEach((item) => {
                var newobj = item;
                newobj.createDate = key;
                newobj.time = i;
                arr.push(newobj);
              });
            }
          }
          this.dataList = arr;
          console.log("this.dataList", this.dataList);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.left {
  width: 205px;
  height: 100%;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
  padding: 10px 0;
  ul {
    list-style: none;
    .active {
      background-color: #288def;
      background-color: var(--theme-brand6, #288def);
      color: #fff;
      color: var(--theme-fc-revert, #fff);
    }
    li {
      text-indent: 30px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      position: relative;
    }
    li::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #c0cbd2;
      margin-right: 10px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 15px;
    }
  }
}
.right {
  width: calc(100% - 205px);
  position: relative;
  padding: 20px;
  height: calc(100% - 60px);
  overflow-y: auto;
}
.paginationBox {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>
<style>
#messagePage {
  width: 100%;
  height: 100%;
  min-width: 1460px;
  box-sizing: border-box;
  display: flex;
  position: relative;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
  height: 6px; /* 滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 10px; /* 轨道圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
}

/* 滚动条滑块悬停 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬停时的滑块颜色 */
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>